<template>
<!--  富文本 整合oss 图片上传 -->
  <div class="mavonEditor">
    <mavon-editor :ishljs="true" ref="md" @imgAdd="$images" v-model="value"     @change="$change" />
  </div>
</template>

<script>
import upload from '@/api/upload/upload'
export default {
       name: 'commedit',
      props: {
      value: String
    },
  data() {
    return {
      value: "",
      imageName: "",
      imageUrl: "",
      dataObj: {
        policy: "",
        signature: "",
        key: "",
        ossaccessKeyId: "",
        dir: "",
        host: "",
        // callback:'',
      },
    };
  },
  computed: {
    imageUrl() {
      return this.value;
    },
    imageName() {
      if (this.value != null && this.value !== "") {
        return this.value.substr(this.value.lastIndexOf("/") + 1);
      } else {
        return null;
      }
    },
    fileList() {
      return [
        {
          name: this.imageName,
          url: this.imageUrl,
        },
      ];
    },
    showFileList: {
      get: function () {
        return (
          this.value !== null && this.value !== "" && this.value !== undefined
        );
      },
      set: function (newValue) {},
    },
  },
  methods: {

      /**
     *  value: 内容的值改变
     */
    $change(value, render) {
      this.$emit("input", value);
    },
    emitInput(pos, val) {
      this.$refs.md.$img2Url(pos, val);
      console.log(this.value)
      this.$emit('input', this.value)
    },
    handleRemove(file, fileList) {
      this.emitInput("");
    },
    $images(post, $file) {
      console.log($file);
      let _self = this;
        const formData = new FormData();
        formData.append("file",$file)
        upload.upload(formData).then(res=>{
        if(res.code==200){
           this.emitInput(post,res.data.fileName);
        }else{
      this.$notify.error({
          title: '不支持图片类型',
          message: '不支持该图片类型'
        });
        }
       }) 
    },
  },
};
</script>

<style>
.mavonEditor {
  width: 100%;
  height: 100%;
}
</style>